<template>
  <div>
    <HomeHeader />
    <!-- Tab栏自带的APIsticky代表内容向下移动时Tab置顶 swipeable代表可以用鼠标滑动内容,(体育没有数据,所以在那里不能左右滑动) -->
    <van-tabs v-model="active" background="#e4e4e4" sticky swipeable>
      <van-tab
        :to="'/?category='+index"
        :title="item.name"
        v-for="(item,index) in categoryList"
        :key="index"
      >
        <!-- {{item.name}}
        <br />-->
        <!-- <div v-for="(item,index) in postList" :key="index">{{item.title}}</div> -->
        <van-list
          v-model="item.loading"
          :finished="item.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <PostItem :postData="item" v-for="(item,index) in item.postList" :key="index" />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import HomeHeader from "@/components/HomeHeader";
import PostItem from "@/components/PostItem";
export default {
  data() {
    return {
      // active: 0,
      active: Number(this.$route.query.category) || 0,
      categoryList: []
    };
  },
  watch: {
    active(newVal) {
      // console.log("当前选项被改变" + newVal);
      // const categoryId = this.categoryList[newVal].id; //拿到当前每个Tab选项的id
      // this.getCategoryPosts(categoryId);
      const category = this.categoryList[newVal];
      if (category.postList.length == 0) {
        // this.getCategoryPosts();
        const categoryId = this.categoryList[newVal].id; //拿到当前每个Tab选项的id
        this.getCategoryPosts(categoryId);
      }
    }
  },
  // 获取栏目数据
  mounted() {
    //本地存储有就有本地储存的
    if (localStorage.getItem("enableList")) {
      this.loadCategoryLocal();
    } else {
      this.$axios({
        url: "/category",
        method: "GET"
      }).then(res => {
        console.log(res.data.data);
        // const newArray = res.data.data.map(e => {
        //   const newCategoty = { ...e, postList: [] };
        //   return newCategoty;
        // });
        // console.log(newArray);
        // this.categoryList = res.data.data;
        this.categoryList = this.initCategory(res);
        console.log(this.categoryList);
        // 根据当前激活栏目选项的id，第一次获取文章列表
        const categoryId = this.categoryList[this.active].id;
        this.getCategoryPosts(categoryId);
      });
    }
  },
  components: {
    HomeHeader,
    PostItem
  },
  methods: {
    loadCategoryLocal() {
      // 模拟拿到栏目管理的本地存储数据
      const res = {
        data: {
          data: JSON.parse(localStorage.getItem("enableList"))
        }
      };
      //下面从原来的获取栏目复制下来的，操作是一样的,只是使用了变化了data
      this.categoryList = this.initCategory(res);
      console.log(this.categoryList);
      // 根据当前激活栏目选项的id，第一次获取文章列表
      const categoryId = this.categoryList[this.active].id;
      this.getCategoryPosts(categoryId);
    },
    //将获取的栏目数据进行改造,添加属性
    initCategory(res) {
      const newArray = res.data.data.map(e => {
        const newCategoty = {
          ...e,
          postList: [],
          pageIndex: 1,
          pageSize: 6,
          loading: true,
          finished: false
        };
        return newCategoty;
      });
      return newArray;
    },
    onLoad() {
      const category = this.categoryList[this.active];
      category.pageIndex += 1;
      // 模拟两秒加载发起请求;
      setTimeout(() => {
        this.getCategoryPosts();
      }, 2000);
      // this.getCategoryPosts();
    },
    // 获取文章列表数据
    getCategoryPosts(categoryId) {
      this.$axios({
        url: "/post",
        method: "get",
        params: {
          category: categoryId,
          pageIndex: this.categoryList[this.active].pageIndex,
          pageSize: this.categoryList[this.active].pageSize
        }
      }).then(res => {
        // console.log(res.data.data);
        // this.postList = res.data.data;
        //this.categoryList[this.active]是当前激活的分类对象
        // this.categoryList[this.active].postList = res.data.data;
        //拼接的三种方式
        // 1.
        // const oldPostList = this.categoryList[this.active].postList;
        // const newPostList = oldPostList.concat(res.data.data);
        // 2.
        // const newPostList = [
        //   ...this.categoryList[this.active].postList,
        //   ...res.data.data
        // ];
        // 3.
        this.categoryList[this.active].postList = [
          ...this.categoryList[this.active].postList,
          ...res.data.data
        ];
        // 手动告诉组件已经加载完毕
        this.categoryList[this.active].loading = false;
        if (res.data.data.length < this.categoryList[this.active].pageSize) {
          this.categoryList[this.active].finished = true;
        }
      });
    }
  }
};
</script>

<style>
</style>
